<!-- 从业者端-我的-个人信息 -->
<template>
	<view class="container">
		<!-- 日历 -->
		<!-- 		<u-calendar v-model="show" ref="calendar" @change="change" :active-bg-color="activeBgColor" :btn-type="btnType"
			max-date="2100-01-01">
		</u-calendar> -->


		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 提交的this.$refs.form.validate验证，一定是需要有form标签的ref="form"来对应的，否则会报错 -->
			<u-form :model="form" ref="form" :rules="rules">
				<!-- 2寸照片 -->
				<view class="form-section">
					<view class="section-title">
						<!-- <text class="required">*</text> -->
						<text>头像</text>
						<text class="section-subtitle">上传二寸白底照片，建议彩色</text>
					</view>
					<u-upload 
					   ref = "upload"
					   action="#" 
						 :file-list="photoList" 
						 @on-list-change="onchange"  
						 @on-remove="(e) => deletePic(e, index)"  
						 :multiple="false"
						 max-count="1" 
						 upload-text="上传头像" 
						 :custom-btn="true"
						 :auto-upload="false"
						 width="99px"
						 height="99px"
						 :show-progress="false"
						 >
						<!-- 自定义上传图片 -->
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</view>

				<!-- picker弹窗 -->
				<u-picker v-model="pickerShow" :mode="mode" :range="range" @confirm="confirm"></u-picker>


				<!-- 姓名 -->
				<view class="form-section">
					<u-form-item label="姓名" prop="name" label-width="240">
						<u-input v-model="form.name" placeholder="请输入姓名" clearable />
					</u-form-item>
				</view>

				<!-- 性别 -->
				<view class="form-section">
					<u-form-item label="性别" prop="gender" label-width="240">
						<!-- <u-input v-model="form.gender" placeholder="性别" clearable /> -->
						<u-radio-group v-model="form.gender">
							<u-radio name="男">男</u-radio>
							<u-radio name="女">女</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>

				<!-- 执照起始日期 -->
				<view class="form-section">
					<u-form-item label="出生日期" prop="startDate" label-width="240">
						<u-input v-model="form.startDate" placeholder="出生日期" clearable @click="showChange('start')" :focus="false"  disabled/>
					</u-form-item>
				</view>

				<!-- 文化程度 -->
				<view class="form-section">
					<u-form-item label="学历" prop="Culture" label-width="240">
						<u-input v-model="form.Culture" placeholder="请选择学历" clearable @click="showChange('selector')" :focus="false"  disabled/>
					</u-form-item>
				</view>

				<!-- 参加工作日期 -->
				<view class="form-section">
					<u-form-item label="参加工作日期" prop="startDate" label-width="240">
						<u-input v-model="form.jobDate" placeholder="参加工作日期" clearable @click="showChange('jobDate')" :focus="false"  disabled/>
					</u-form-item>
				</view>

				<!-- 联系电话 -->
				<view class="form-section">
					<u-form-item label="手机号" prop="iphone" label-width="240">
						<u-input v-model="form.iphone" placeholder="请输入手机号" clearable />
					</u-form-item>
				</view>

				<!-- 微信号 -->
				<view class="form-section">
					<u-form-item label="微信号" prop="iphone" label-width="240">
						<u-input v-model="form.wxUser" placeholder="请输入微信号" clearable />
					</u-form-item>
				</view>

				<!-- 所在地区 -->
				<!-- 				<view class="form-section">
					<u-form-item label="所在地区" prop="selectRegion" label-width="240">
						<u-input v-model="form.selectRegion" placeholder="请选择所在地区" clearable @click="showChange('region')" />
					</u-form-item>
				</view> -->

				<!-- 按钮组 -->
				<view class="button-group">
					<!-- 					<u-button type="default" @click="handlePrev" shape="circle" :custom-style="customStyleObject">
						上一步
					</u-button> -->
					<u-button type="primary" @click="handleNext" :custom-style="btuStyle" shape="circle" :loading="loading">
						保存
					</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				//按钮统一色彩
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
					marginRight: '20rpx',
				},
				// 日历 
				show: false,
				activeBgColor: '#2979ff',
				btnType: "primary",
				inputType: "", //判断是起始日期还是有效日期

				// picker弹窗
				pickerShow: false,
				mode: "selector",
				range: ['硕士以上', '硕士', '本科', '专科','高中','初中','小学'],

				loading: false,
				//图片上传地址
				action: '#',
				// 图片数组-头像照片
				photoList: [], //保存图片URL
				photoListCode:'', ////保存图片CODE
				base64Data :'', //存储base64
				photo_base_info: '', ///存储服务器返回图片的ID
				// value: '男',

				form: {
					name: '', ///改名
					gender: '男', ///性别
					startDate: '', //出生日期
					jobDate: '', //参加工作日期
					Culture: '', //文化程度
					iphone: '', ///联系电话
					selectRegion: '', //所在地区
					wxUser: '' ,//微信号
					
				},
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',

				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请选择出生日期',
						trigger: 'change'
					}],
					jobDate: [{
						required: true,
						message: '请选择参加工作日期',
						trigger: 'change'
					}],
					Culture: [{
						required: true,
						message: '请选择学历',
						trigger: ['change', 'blur']
					}],
					iphone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return /^1[3-9]\d{9}$/.test(value);
							},
							message: '请输入11位手机号码',
							trigger: ['blur', 'change']
						}
					],
				}
			}
		},
		onLoad() {
			// 打开个人信息
			this.$u.api.queryjlsimple({
				"usercode": uni.getStorageSync('usercode'),
			}).then(res => {
				console.log('个人缩减信息：', res);
				let base_info = res.data.base_info.base;
				// 方法2：合并更新
				Object.assign(this.form, {
						name: base_info.jlbi_name, ///姓名
						gender: base_info.jlbi_sex, ///性别
						startDate: base_info.jlbi_birth, //出生日期
						jobDate: base_info.jlbi_workindate, //参加工作日期
						Culture: base_info.jlbi_xueli, //文化程度
						iphone: base_info.jlbi_phoneno, ///联系电话
						wxUser: base_info.jlbi_wxopenid //微信号
				});
				this.photoList = []
				this.photoList.push({
					url: base_info.header_img_uri[0].url
				})
			})

			console.log('个人缩减信息-1：', this.photoList);
		},
		methods: {
			// 删除图片
			deletePic(event,index) {
			  this.photoList.splice(event, 1)
				console.log('删除:',this.form)
			},
			
			// 营业执照上传
			// 图片添加到list中触发
			onchange(list, name) {
				if(this.photoList.length == 0) {
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						this.photoList = []
						this.photoList = [...this.photoList, ...newFiles];									
				
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64()
						})	
							
					}
	    }
	     console.log("onchange-3:", this.form)	
			},

			// 上传Base64数据到服务器
			uploadBase64() {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '上传中...'
				})

				// 调用照片上传接口
				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('usercode'),
					"rescode": this.base64Data,
					"restype": "0",
					"resdesc": "上传个人头像照片"
				}).then(res => {
					// 保存服务端返回的图片id
					this.photoListCode = res.data.base_info
					console.log('uploadres:', this.photo_base_info)
				})
			},

			// Picker弹窗
			showChange(type) {
				if (type == 'start') {
					//出生年月
					this.inputType = type;
					// this.show = !this.show;
					this.mode = 'time'
					this.pickerShow = !this.pickerShow;
				} else if (type == 'jobDate') {
					// 参加工作时间
					this.inputType = type;
					this.mode = 'time'
					this.pickerShow = !this.pickerShow;

				} else if (type == 'selector') {
					// 学历
					this.mode = type;
					this.inputType = type;
					this.range = ['硕士以上', '硕士', '本科', '专科','高中','初中','小学'];
					this.pickerShow = !this.pickerShow;
				} else {
					// 地区region
					this.mode = type;
					this.inputType = type;
					this.pickerShow = !this.pickerShow;
				}

			},

			// picker选择选择确认
			confirm(e) {
				if (this.inputType == 'start') {
					this.form.startDate = e.year + '-' + e.month + '-' + e.day
				} else if (this.inputType == 'jobDate') {
					this.form.jobDate = e.year + '-' + e.month + '-' + e.day
				} else if (this.inputType == 'selector') {
					// 赋值学历
					this.form.Culture = this.range[e[0]];
				} else {
					// 赋值地区
					this.form.selectRegion = e.province.label + '-' + e.city.label + '-' + e.area.label;;
				}
			},

			// 上一步
			handlePrev() {
				uni.navigateBack();
			},

			// 保存后
			handleNext() {
				if (!this.$u.test.mobile(this.form.iphone)) {
					return this.$u.toast('请输入正确的手机号')
				}
				
				this.$u.api.createjlbase({
					"usercode": uni.getStorageSync('usercode'),
					"jlbiname": this.form.name,
					"jlbiheaderimg": this.photoListCode,
					"jlbisex": this.form.gender,
					"jlbibirth": this.form.startDate,
					"jlbixueli": this.form.Culture,
					"jlbiworkindate": this.form.jobDate,
					"jlbiphoneno": this.form.iphone,
					"jlbiwxopenid": this.form.wxUser
				}).then(res => {
					console.log('简历-个人信息：', res)
					uni.navigateTo({
						url: '/pages/Practitioner/personMesume/personMesume'
					});
				})





				// 验证跳转
				// this.$refs.form.validate(valid => {
				// 	if (!valid) return;

				// 	if (this.licenseFiles.length === 0) {
				// 		return this.$u.toast('请上传营业执照');
				// 		// console.log('toast请上传营业执照');
				// 	}

				// 	this.loading = true;

				// 	// 模拟API调用
				// 	setTimeout(() => {
				// 		this.loading = false;
				// 		uni.navigateTo({
				// 			url: '/pages/Practitioner/perfectData/idCard'
				// 		});
				// 	}, 1000);
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		// background-color: #f5f5f5;
		min-height: 100vh;


		.slot-btn {
			width: 104px;
			height: 104px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
			margin-left: 10px;
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		.header {
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			.form-section {
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-content: flex-start;
				align-items: center;


				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;

					.required {
						color: #f56c6c;
						margin-right: 8rpx;
					}
				}

				.section-subtitle {
					font-size: 26rpx;
					color: #999;
					margin-bottom: 20rpx;
					display: block;
				}
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 8rpx;
				}
			}

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 350px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
	}
</style>